iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 6

[Day06] 製作一對一聊天頁面(一):聊天室列表

  • 分享至 

  • xImage
  •  

聊天室元件 index.vue

<div class="chat">     
<div class="rooms">         
<div class="room">             
<div>                 
<el-avatar :size="60" :src="'https://picsum.photos/60'"></el-avatar>             
</div>             
<div class="text-block">                 
<span>阿君</span>                 
<div>你好嗎</div>             
</div>             
<div class="日期">星期日</div>         
</div>     
</div>     
<div class="messages">b</div> </div>

style.scss

@import "../../assets/scss/_variables"; 
.chat{   display:flex;   height: 100%; } 
.rooms{   flex-basis:260px;   background-color:red; } 
.messages{   flex-grow: 1;   background-color:black; } 
.room > *{   display: inline-block; } 

上一篇
[Day05] 加入Router設定完成頁面基本配置
下一篇
[Day07] 番外篇: 三個前端開發實用小工具
系列文
用Vue實作一個LINE@聊天機器人後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言